<template>
  <div class="wzy">
    <div class="wwfirst">
      <img src="../assets/img/jiantou.png" alt="" />
      <h1>小额免密支付</h1>
      <div class="wzhif">
        <van-switch-cell
          class="wxiaoe"
          v-model="checked"
          @click="dingding"
          title="小额免密支付"
        />
      </div>
      <van-cell title="单笔交易限额" value="1000.00元" />
      <van-cell title="当日交易限额" value="3000.00元" />
      <van-cell title="日累计使用限额" value="0.00元" />

      <div class="wwenxin">
        温馨提示：<br />
        1.开通后在专用POS上进行小额消费不用输入银行卡卡密码。<br />
        2.开通我行借记卡小额快速支付业务，可在银联指定商户刷卡消费，无需输入密码。<br />
        3.关闭我行借记卡小额快速支付业务，所有消费均需验证密码。
      </div>
      <van-button type="primary" size="large" @click="wzy11">确定</van-button>
    </div>
    <!-- 密码 -->
    <!-- 密码框   弹出层-->

    <van-dialog
      v-model="showa"
      show-cancel-button
      style="height: 350px"
      @confirm="confirm"
    >
      <van-password-input
        :value="value"
        :focused="showKeyboard"
        @focus="showKeyboard = true"
      />
      <!-- 数字键盘 -->
      <van-number-keyboard
        v-model="value"
        :show="showKeyboard"
        @blur="showKeyboard = true"
      />
    </van-dialog>
  </div>
</template>

<script>
import { yun11, yun } from "../api/mianmi";
import { Dialog } from "vant";
export default {
  data() {
    return {
      checked: false,
      value: "",
      showKeyboard: true,
      showa: false,
      show: false,
      passs: false,
      www: "",
      pas: "value",
      zzz: [],
      num: 0,
      data:''
    };
  },
  methods: {
    wzy11() {
      this.showa = true;
    },

    dingding() {
      yun()
        .then((res) => {
          if (res.code == 200) {
            this.zzz = res.data.data;
            if (this.checked) {
              this.data = 1;
            } else {
              this.data = 0;
            }
          }else{
            Dialog({title: '温馨提示', message: res.msg});
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    confirm() {
      yun11({ count: this.data, password: this.value }).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.www = res.data.password;
          if (this.www == this.www) {
            alert("成功");
          }
          if (res.code == 400) {
            alert("失败");
          }
        }
      });
    },
  },
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.wzy {
  width: 390px;
  height: 800px;
}
.wwfirst {
  background-color: white;
  height: 70px;
}

.wwfirst img {
  width: 22px;
  height: 18px;
  line-height: 17px;
  margin-left: 15px;
  margin-top: 16px;
}

.wwfirst h1 {
  font-size: 17px;
  color: black;
  margin-left: 145px;
  margin-top: -24px;
}
.wwenxin {
  font-size: 16px;
  margin-top: 10px;
  margin-bottom: 15px;
  margin-left: 10px;
}
.wxiaoe {
  margin-left: 10px;
  padding-left: 300px;
}
.wzhif {
  margin-left: -12px;
  margin-bottom: 10px;
}
</style>